<template lang="pug">
  .CreateAccountModal
    Modal(
      v-model="isShowCreateAccountModal"
      :title="createAccountModalTitle"
      class-name="vertical-center-modal"
      width="750"
    )
      Form.ivu-row.has-rules-item2.pr-20(ref="formData" :model="formData" :rules="rules" :label-width="120")
        FormItem.form-item.ivu-col(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop" v-if="item.isShow")
          template(v-if="item.type === 'input'")
            Input(v-model="formData[item.model]" :placeholder="item.placeholder")
          template(v-if="item.type === 'password'")
            Input(v-model="formData[item.model]" :placeholder="item.placeholder" type="password" @on-blur="inputOnBlur(item.model, formData[item.model])")
          template(v-if="item.type === 'select'")
            Select(v-model="formData[item.model]" :placeholder="item.placeholder" filterable :disabled="item.isDisabled")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.label}}
          template(v-if="item.type === 'switch'")
            i-switch(v-model="formData[item.model]")
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSave") 保存
</template>

<script>
import { Common } from '@/utils/common.js'
// import { UserApi } from '@/api/User.api.js'
import UserApi from '@/api/User.api.js'
import { CustomerSalaryApi } from '@/api/CustomerSalary.api.js'
export default {
  name: 'CreateAccountModal',

  watch: {
  },

  computed: {
    // rules2 () {
    //   var temp = this.rules
    //   temp.password = []
    //   return temp
    // }
  },

  data () {
    return {
      isShowCreateAccountModal: false,
      createAccountModalTitle: '',
      basicDataId: null,
      formData: {
        id: '',
        name: '',
        userName: '',
        password: '',
        phone: '',
        email: '',
        companyId: '',
        roleId: '',
        axsUserId: '',
        enabled: true
      },
      formItem: [
        { type: 'input', label: '账号名称', placeholder: '请输入账号名称', prop: 'name', model: 'name', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'input', label: '登陆名称', placeholder: '请输入登陆名称', prop: 'userName', model: 'userName', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'password', label: '登陆密码', placeholder: '请输入登陆密码', prop: 'password', model: 'password', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'input', label: '手机号码', placeholder: '请输入手机号码', prop: 'phone', model: 'phone', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'input', label: '邮箱', placeholder: '请输入邮箱', prop: 'email', model: 'email', style: 'ivu-col-span-12', isShow: true },
        { type: 'select', label: '所属公司', placeholder: '请选择所属公司', prop: 'companyId', model: 'companyId', style: 'ivu-col-span-12 is-required', options: 'companyList', fn: 'selectChange', isShow: true, isDisabled: false },
        { type: 'select', label: '所属角色', placeholder: '请选择所属角色', prop: 'roleId', model: 'roleId', style: 'ivu-col-span-12 is-required', options: 'roleList', fn: 'selectChange', isShow: true },
        { type: 'input', label: '安薪税用户ID', placeholder: '请输入安薪税用户ID', prop: 'axsUserId', model: 'axsUserId', style: 'ivu-col-span-12', isShow: true },
        { type: 'switch', label: '启用', placeholder: '请选择是否启用', prop: 'enabled', model: 'enabled', style: 'ivu-col-span-12 is-required', isShow: true }
      ],
      rules: {
        // name: [
        //   { required: true, message: '请输入账号名称' }
        // ],
        // userName: [
        //   { required: true, message: '请输入登陆名称' }
        // ],
        // password: [
        //   { required: true, message: '请输入登陆密码' }
        // ],
        // phone: [
        //   { required: true, message: '请输入手机号码' }
        // ],
        // companyId: [
        //   { required: true, message: '请选择所属公司' }
        // ],
        // roleId: [
        //   { required: true, message: '请选择所属角色' }
        // ]
      },
      arrListDown: {
        companyList: [],
        roleList: []
      },
      axsEnableSwitch: false // 是否显示安薪税用户ID
    }
  },

  mounted () {
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, param) {
      this[methodsWords](param)
    },

    cancel () {
      this.isShowCreateAccountModal = false
    },

    show () {
      this.isShowCreateAccountModal = true
      this.$refs.formData.resetFields()
      console.log('点击是的show()')
    },

    // 保存账号
    handleSave () {
      this.formData.id = this.basicDataId

      var paramObj = { ...this.formData }
      paramObj.password = this.formData.password !== '000000' ? this.formData.password : ''
      console.log('保存账号：', paramObj)
      this.$refs.formData.validate((valid) => {
        if (valid) {
          UserApi.save(paramObj).then(res => {
            if (res.status === 200 && res.data.success) {
              this.isShowCreateAccountModal = false
              this.$Message.success(res.data.message)
              this.$emit('handleSave')
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
          this.$Message.warning('输入有误，请返回检查!')
        }
      })
    },

    // 根据ID获取用户信息
    async getModel (id) {
      this.arrListDown.companyList = []
      if (id) {        
        this.formItem.map(item => {
          if (['companyId', 'roleId'].indexOf(item.model) !== -1) {
            item.isShow = false
          }
        })
      } else {
        this.formItem.map(item => {
          item.isShow = true
        })
      }

      // Object.keys(this.formData).forEach(key => {
      //   // this.formData[key] = ''
      //   if (key !== 'enabled') {
      //     this.formData[key] = ''
      //   }
      // })

      var params = {
        'parameter.id': id
      }
      let res = await UserApi.getModel(params)
      console.log('根据ID获取用户信息: ', res)
      if (res.status === 200 && res.data.success) {
        var result = res.data.data
        var detail = result.detail
        this.axsEnableSwitch = result.axsEnableSwitch

        if (!result.axsEnableSwitch) {
          this.formItem.map(item => {
            if (item.model === 'axsUserId') {
              item.isShow = false
            }
          })
        }

        // 所属公司
        var tempCompanyList = []
        result.companyList.map(item => {
          tempCompanyList.push({ value: item.id, label: item.name })
        })
        this.arrListDown.companyList = tempCompanyList

        // 所属角色
        var tempRoleList = []
        result.roleList.map(item => {
          tempRoleList.push({ value: item.key, label: item.value })
        })
        this.arrListDown.roleList = tempRoleList

        Object.keys(this.formData).forEach(key => {
          this.formData[key] = detail[key]
        })

        if (id) {
          this.formData.password = '000000' // 随便给个密码
          // this.rules.password = [{}]
        } else {
          this.formData.enabled = true
        }
      } else {
        this.$Message.error({
          content: resp.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 密码输入框失去焦点时触发
    inputOnBlur (model, value) {
      console.log('密码输入框失去焦点时触发: ', value)
      this.formData[model] = value
    }
  }
}
</script>

<style lang="less" scoped>

</style>
